import React, {useEffect, useState} from "react";
import './todo.scss'
import {getManagerAllRecordTaskCountInfo} from "../../api/recordTaskApi";

function Todo(){
    const todoTitles = ["资料初审", "现场勘查", "复审"]
    const todoDetailsTitle = ["待处理", "即将过期处理", "过期处理", "已处理", "已退回"]

    const dataIndex = ['firstTrial', 'siteInvestigation', 'recheck']
    const todoListIndex = ['todo', 'processed', 'willExpire', 'expired', 'returned']

    const tempData = {
        "siteInvestigation": {
            "todo": 0,
            "processed": 0,
            "willExpire": 0,
            "expired": 0,
            "returned": 0
        },
        "recheck": {
            "todo": 0,
            "processed": 0,
            "willExpire": 0,
            "expired": 0,
            "returned": 0
        },
        "firstTrial": {
            "todo": 0,
            "processed": 0,
            "willExpire": 0,
            "expired": 0,
            "returned": 0
        }
    }

    const [data, setData] = useState(tempData)

    const getData = () => {
        getManagerAllRecordTaskCountInfo(20)
            .then(res => {
                setData(res)
            })
    }

    const gotoDetails = (name) => {
        window.location.href = '../todo/' + name + '?menu=todo'
    }

    useEffect(() => {
        getData()
    }, []);


    return(
        <div className={'todo-container'}>
            <div className={'todo-title'}>
                备案申请/变更审核
            </div>

            {todoTitles.map((value, index1) => {
                return(
                    <div className={'todo-data'} key={index1}>
                        <div>{value}</div>

                        <div className={'todo-data-detail'} onClick={gotoDetails.bind(this,dataIndex[index1])}>
                            {todoDetailsTitle.map((value1,index2) => {
                                return(
                                    <div className={'todo-data-detail-item'} key={index2}>
                                        <div>{value1}</div>
                                        <div style={{fontSize:18}}>{data[dataIndex[index1]][todoListIndex[index2]]}</div>
                                    </div>
                                )
                            })}
                        </div>
                    </div>
                )
            })}

        </div>
    )
}

export default Todo